<!DOCTYPE html>
<html>
    <head>
    <meta charset="utf-8">
    <title>vue html demo</title>
    <script src="./lib/vue-2.4.0.js"></script>
    </head>
    <body>
        <div id="app">

            <com1 v-bind:par="msg" @func="getMsg"></com1>

        </div>
        <template id="tmpl"> 
                <div>
                    <h1>这是子元素,,,{{ par }}</h1>
                <button @click="send">给父组件传值</button>

                </div>
            </template>
        <script>

            var com1 = {
                template: '#tmpl',
                data() {
                    return {
                        msg: '子组件的msg'
                    }
                },
                props: ['par'],
                methods: {
                    send() {
                        this.$emit('func', this.msg)
                    }
                },
            }            

            var vm = new Vue({
                el: '#app',
                data: {
                    msg: '这是父组件',
                    getMsgForm :''
                } ,
                methods:{
                    getMsg(data) {
                        this.getMsgForm = data
                        console.log(this.getMsgForm)
                    }
                },
                components: {
                    com1
                }
            })
        </script>
    </body>
</html>